<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>主页</title>
    <link rel="stylesheet" href="./css/homepage.min.css">
</head>

<body>
    <header>
        <p>蜗牛学院学生管理系统</p>
    </header>
    <main>
        <div class="left">
            <ul class="nav">
                <li>
                    <p>学生管理</p>
                    <ul class="sub-nav">
                        <li>新增学生</li>
                        <li>学生列表</li>
                    </ul>
                </li>
                <li>
                    <p>班级管理</p>
                    <ul class="sub-nav">
                        <li>新增班级</li>
                        <li>班级列表</li>
                    </ul>
                </li>
                <li>
                    <p>班主任管理</p>
                    <ul class="sub-nav">
                        <li>新增班主任</li>
                        <li>班主任列表</li>
                    </ul>
                </li>
                <li>
                    <p>教师管理</p>
                    <ul class="sub-nav">
                        <li>新增教师</li>
                        <li>教师列表</li>
                    </ul>
                </li>
                <li>
                    <p>专业管理</p>
                    <ul class="sub-nav">
                        <li>新增专业</li>
                        <li>专业列表</li>
                    </ul>
                </li>
                <li>
                    <p>排课管理</p>
                    <ul class="sub-nav">
                        <li>新增排课</li>
                        <li>排课列表</li>
                    </ul>
                </li>
            </ul>
        </div>
        <div class="right">
            <!-- 学生列表 -->

            <div class="one-page page">
                <div class="title">
                    <p>学生信息</p>
                </div>
                <main>
                    <div class="sub-title">
                        <p>学生数据</p>
                    </div>
                    <div class="choose">
                        <select name="" id="">
                            <option value="">姓名</option>
                            <option value="">编号</option>
                            <option value="">年龄</option>
                            <option value="">性别</option>
                            <option value="">班级</option>
                            <option value="">班主任</option>
                            <input type="text">
                        </select>
                    </div>
                    <table>
                        <thead>
                            <tr>
                                <th>学生编号</th>
                                <th>学生姓名</th>
                                <th>学生年龄</th>
                                <th>学生性别</th>
                                <th>学生班级</th>
                                <th>学生专业</th>
                                <th>班主任</th>
                                <th>操作</th>
                            </tr>
                        </thead>
                        <tbody class="students-list">

                        </tbody>
                    </table>
                    <p>每页
                        <select name="" id="">
                            <option value="">1</option>
                            <option value="">2</option>
                            <option value="">3</option>
                            <option value="">4</option>
                            <option value="">5</option>
                        </select> 条数据。显示第1条到第5条数据，共计30条数据。
                        <span>弟1/5页</span>
                    </p>
                    <div class="foot">
                        <button>首页</button>
                        <button>上一页</button>
                        <button>下一页</button>
                        <button>尾页</button>
                    </div>
                </main>
                <!-- 修改学生 -->
                <div id="sub-page" class="index1">
                    <div class="sub-title">
                        修改学生数据
                    </div>
                    <p>学生姓名：<input type="text" id="sub-name"></p>
                    <p>学生年龄：<input type="text" id="sub-age"></p>
                    <p class="sub-sex"> 学生性别：
                        <input type="radio" name="sub-gender" value="男"> 男
                        <input type="radio" name="sub-gender" value="女"> 女
                    </p>
                    <p>学生专业：
                        <select name="" id="sub-students-major">
                            
                        </select>
                    </p>
                    <p>学生班级：
                        <select name="" id="sub-students-classes">
                            
                        </select>
                    </p>
                    <button class="sub-change">确认修改</button>
                </div>
            </div>


            <!-- 新增学生 -->
            <div class="two-page page">
                <div class="title">
                    <p>新增学生</p>
                </div>
                <main>
                    <div class="sub-title">
                        <p>新增数据</p>
                    </div>
                    <div class="text">
                        <p>学生姓名：<input type="text" id="name"></p>
                        <p>学生年龄：<input type="text" id="age"></p>
                        <p class="sex"> 学生性别：
                            <input type="radio" name="gender" value="男">男
                            <input type="radio" name="gender" value="女">女
                        </p>
                        <p>学生专业：
                            <select name="" id="students-major">
                                
                                
                            </select>
                        </p>
                        <p>学生班级：
                            <select name="" id="students-classes">
                                
                            </select>
                        </p>
                        <p>上传照片：<input type="file"></p>
                        <button class="ok" id="addStudent">确认新增</button>
                    </div>
                    <div class="img">
                        <img src="./images/icon_03.png" alt="">
                    </div>
                </main>
            </div>
            <!-- 新增班级 -->
            <div class="three-page page">
                <div class="title">
                    <p>新增班级</p>
                </div>
                <main>
                    <div class="sub-title">
                        <p>班级数据</p>
                    </div>
                    <div class="three-select">
                        <span>所属专业：</span>
                        <select name="" id="get-major"></select>
                    </div>
                    <div class="three-select">
                        <span>班级名称：</span>
                        <input type="text" id="get-classes">
                    </div>
                    <button class="ok" id="addClasses">确认新增</button>
                </main>
            </div>
            <!-- 班级渲染 -->
            <div class="four-page page">
                <div class="title">
                    <p>班级信息</p>
                </div>
                <main>
                    <div class="sub-title">
                        <p>班级数据</p>
                    </div>
                    <div class="choose">
                        <select name="" id="">
                            <option value="">班级编号</option>
                            <option value="">专业</option>
                            <option value="">班级</option>
                            <input type="text">
                        </select>
                    </div>
                    <table>
                        <thead>
                            <tr>
                                <th>班级编号</th>
                                <th>所属专业</th>
                                <th>班级名称</th>
                                <th>操作</th>
                            </tr>
                        </thead>
                        <tbody class="classes-list">

                        </tbody>
                    </table>
                    <p>每页
                        <select name="" id="">
                            <option value="">1</option>
                            <option value="">2</option>
                            <option value="">3</option>
                            <option value="">4</option>
                            <option value="">5</option>
                        </select> 条数据。显示第1条到第5条数据，共计30条数据。
                        <span>弟1/5页</span>
                    </p>
                    <div class="foot">
                        <button>首页</button>
                        <button>上一页</button>
                        <button>下一页</button>
                        <button>尾页</button>
                    </div>
                </main>
            </div>
            <!-- 新增专业 -->
            <div class="nine-page page">
                <div class="title">
                    <p>新增专业</p>
                </div>
                <main>
                    <div class="sub-title">
                        <p>新增数据</p>
                    </div>
                    <!-- major：专业 -->
                    <div class="major">
                        <p>专业名称：<input type="text"></p>
                    </div>
                    <button class="ok" id="addMajor">确认新增</button>
                </main>
            </div>
            <!-- 专业列表 -->
            <div class="ten-page page">
                <div class="title">
                    <p>专业信息</p>
                </div>
                <main>
                    <div class="sub-title">
                        <p>专业数据</p>
                    </div>

                    <table class="major-data">
                        <thead>
                            <tr>
                                <th>专业编号</th>
                                <th>专业名称</th>
                                <th>操作</th>
                            </tr>
                        </thead>
                        <tbody class="major-list">

                        </tbody>
                    </table>
                </main>
            </div>
        </div>
    </main>
    <script src="./js/jquery.js"></script>
    <script src="./js/homepage.js"></script>
</body>

</html>